<!DOCTYPE html>
<style>
  body {
    width: 600px;
  }

  div {
    display: inline-block;
    margin: 20px;
  }

  object, img, input[type="image"], canvas, embed, iframe {
    margin-top: 5px;
    border: 10px solid rgba(0, 0, 0, 0.5);
    padding: 5px;
    background-color: red;
    background-clip: content-box;
    border-radius: 100px 50px 10px;
    display: block;
    height: 100px;
    width: 100px;
  }
</style>

<script>
if (window.testRunner)
    testRunner.setPluginsEnabled(false);
</script>

<body>
<!-- Replaced elements with border-radius should clip to the content edge curve. -->

<div>
  <object data="resources/square-blue-100x100.png"></object>
</div>

<div>
  <canvas id="testCanvas"></canvas>
  <script>
    var ctx = testCanvas.getContext('2d');
    ctx.fillStyle = "rgb(0,0,255)";
    ctx.fillRect(0, 0, 1000, 1000);
  </script>
</div>

<div>
  <input type="image" src="resources/square-blue-100x100.png">
</div>

<div>
  <img src="resources/square-blue-100x100.png">
</div>

<div>
  <iframe src="resources/square-blue-100x100.png"></iframe>
</div>

<div>
  <embed src="resources/square-blue-100x100.png"></embed>
</div>
</body>
